<template>
  <ph-view>
    <ph-blockquote type="primary">
      行为：【{{ action }}】,
      <br />
      数据: <br />{{ actionData }}
    </ph-blockquote>
    <ph-tab>
      <ph-tab-panel title="表格完整功能案例介绍">
        <template v-slot:default="props">
          <ph-table
            v-show="props.active"
            ref="testtb"
            prev=""
            next=""
            name="测试表"
            :ths="ths"
            :list="list"
            :checked="checkedRes"
            :check="true"
            :total="total"
            :page="page"
            :pager="pager"
            :pageJustify="'right'"
            :show-total="true"
            :show-pagesize="true"
            :show-jump="true"
            :rowAction="{ view: true, edit: true, del: true }"
            :tableAction="{
              export: true,
              colFilter: true,
              print: true,
              delChecked: true,
            }"
            @tr-click="onTrClick"
            @td-click="onTdClick"
            @row-view="onRowView"
            @row-edit="onRowEdit"
            @row-del="onRowDel"
            @del-checked="onDelChecked"
            @page="onPage"
            @check="onCheck"
          ></ph-table>
        </template>
      </ph-tab-panel>
      <ph-tab-panel title="完整功能表格代码">
        <template v-slot:default="props">
          <ph-pretty v-show="props.active">{{ demo0 }}</ph-pretty>
        </template>
      </ph-tab-panel>
      <ph-tab-panel title="关闭分页">
        <template v-slot:default="props">
          <ph-table
            v-show="props.active"
            prev=""
            next=""
            name="测试表"
            :ths="ths"
            :list="list"
            :checked="checkedRes"
            :check="true"
            :rowAction="{ view: true, edit: true, del: true }"
            :tableAction="{
              export: true,
              colFilter: true,
              print: true,
              delChecked: true,
            }"
            @tr-click="onTrClick"
            @td-click="onTdClick"
            @row-view="onRowView"
            @row-edit="onRowEdit"
            @row-del="onRowDel"
            @del-checked="onDelChecked"
            @check="onCheck"
          ></ph-table>
        </template>
      </ph-tab-panel>
      <ph-tab-panel title="关闭表格工具栏">
        <template v-slot:default="props">
          <ph-table
            v-show="props.active"
            prev=""
            next=""
            name="测试表"
            :ths="ths"
            :list="list"
            :checked="checkedRes"
            :check="true"
            :rowAction="{ view: true, edit: true, del: true }"
            @tr-click="onTrClick"
            @td-click="onTdClick"
            @row-view="onRowView"
            @row-edit="onRowEdit"
            @row-del="onRowDel"
            @check="onCheck"
          ></ph-table>
        </template>
      </ph-tab-panel>
      <ph-tab-panel title="关闭行工具栏">
        <template v-slot:default="props">
          <ph-table
            v-show="props.active"
            prev=""
            next=""
            name="测试表"
            :ths="ths"
            :list="list"
            :checked="checkedRes"
            :check="true"
            @tr-click="onTrClick"
            @td-click="onTdClick"
            @check="onCheck"
          ></ph-table>
        </template>
      </ph-tab-panel>
      <ph-tab-panel title="关闭单复选功能">
        <template v-slot:default="props">
          <ph-table
            v-show="props.active"
            prev=""
            next=""
            name="测试表"
            :ths="ths"
            :list="list"
            @tr-click="onTrClick"
            @td-click="onTdClick"
          ></ph-table>
        </template>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <template v-slot:default="props">
          <ph-pretty v-show="props.active">{{ baseUsage }}</ph-pretty>
        </template>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
  toRefs,
} from "vue";
import { PhTable, PhTabPanel, PhTab, PhBlockquote, PhView } from "@/index";
import * as Data from "../data/table";
import Mock from "mockjs";
export default defineComponent({
  components: { PhTable, PhTabPanel, PhTab, PhBlockquote, PhView },
  setup() {
    const ins = getCurrentInstance();
    const testtb = ref<InstanceType<typeof PhTable>>();
    const action = ref("");
    const actionData = ref("");
    const data = reactive({
      list: [],
      total: 125,
      page: 1,
      pager: true,
    });
    const genData = () => {
      testtb.value?.showLoading();
      return new Promise<Array<never>>((resolve) => {
        setTimeout(() => {
          resolve(
            Mock.mock({
              "list|10": [
                {
                  "id|+1": 1,
                  name: "@cname",
                  gender: "男",
                  "age|1-100": 0,
                  "rank|1-10": 0,
                  "park|1-10": 0,
                  "assets|1-100": 0,
                  birth: "@date",
                  uni: "@cword(2)大学",
                  school: "@cword(2)小学",
                  pro: "@ctitle",
                  hobby: "@ctitle",
                },
              ],
            }).list
          );
        }, 1000);
      }).finally(() => {
        testtb.value?.hideLoading();
      });
    };

    const ths = [
      {
        key: "id",
        name: "id",
        lock: true,
        lockPos: "left",
      },
      {
        key: "name",
        name: "姓名",
        lock: true,
        lockPos: "left",
        format: "${name}",
        href: "https://www.baidu.com/s?wd=${name}",
        target: "_blank",
      },
      {
        key: "assets",
        name: "资产",
        dataType: "number",
        type: "danger",
        sum: true,
        lock: true,
        lockPos: "left",
        sort: true,
      },
      {
        key: "gender",
        name: "性别",
      },
      {
        key: "age",
        name: "年龄",
        sort: true,
        align: "center",
        dataType: "number",
        editable: false,
      },
      {
        key: "birth",
        name: "生日",
        sort: true,
        dataType: "date",
        width: "10em",
      },
      {
        key: "park",
        name: "车位",
        dataType: "number",
        sum: true,
        sort: true,
      },
      {
        key: "uni",
        name: "大学",
        clickable: true,
        width: "10em",
      },
      {
        key: "school",
        name: "小学",
        width: "10em",
      },
      {
        key: "rank",
        name: "排行榜",
        dataType: "number",
        sum: true,
        lock: true,
        lockPos: "right",
        sort: true,
      },
      {
        key: "pro",
        name: "职业",
        width: "10em",
      },
      {
        key: "hobby",
        name: "兴趣",
        width: "10em",
      },
    ];
    const checkedRes = ref<Array<string | number>>([]);
    const onCheck = (v: Array<string | number>) => {
      console.log(v);
      checkedRes.value = v;
      action.value = "check";
      actionData.value = JSON.stringify(v);
    };
    const onPage = (p: { page: number }) => {
      genData().then((list) => {
        console.log(p);
        data.page = p.page;
        data.list = list;
        action.value = "page";
        actionData.value = JSON.stringify(p);
      });
    };
    const onTdClick = (key: string, row: Record<string, unknown>) => {
      console.log(key, row, "tdclick");
      action.value = "td-click";
      actionData.value = JSON.stringify(row);
    };
    const onTrClick = (id: string | number, row: Record<string, unknown>) => {
      console.log(id, row, "trclick");
      action.value = "tr-click";
      actionData.value = JSON.stringify(row);
    };
    const onRowView = (row: Record<string, unknown>) => {
      console.log("row-view", row);
      action.value = "row-view";
      actionData.value = JSON.stringify(row);
      ins?.proxy?.$phAlert(actionData.value, action.value);
    };
    const onRowEdit = (row: Record<string, unknown>) => {
      console.log("row-edit", row);
      action.value = "row-edit";
      actionData.value = JSON.stringify(row);
    };
    const onRowDel = (row: Record<string, unknown>) => {
      console.log("row-del", row);
      action.value = "row-del";
      actionData.value = JSON.stringify(row);
    };
    const onDelChecked = (v: Array<string | number>) => {
      console.log("del-checked", v);
      action.value = "del-checked";
      actionData.value = JSON.stringify(v);
    };
    onMounted(async () => {
      genData().then((list) => {
        console.log(list);
        data.list = list;
      });
    });
    return {
      ...Data,
      ths,
      ...toRefs(data),
      action,
      actionData,
      checkedRes,
      testtb,
      onCheck,
      onPage,
      onTrClick,
      onTdClick,
      onRowView,
      onRowEdit,
      onRowDel,
      onDelChecked,
    };
  },
});
</script>
